<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			html,body{ background-color: #F7F8FA; height:100%; }
			.my_friends{ padding-top: 10px;}
			.my_friends ul{ background-color: #fff; margin-bottom: 10px; overflow: hidden;}
			.my_friends .top a{ padding: 10px 15px;}
			.my_friends .top .m_cell_ft img{ width: 6px;}
			.my_friends h4{ display:block; font-size: 15px; font-weight: 400; color: #333;}
			.my_friends .top .m_cell_hd img{ width:30px; margin-right: 15px;}
			.my_friends b{ display:block; font-size: 12px; font-weight: 400; color: #808080; line-height: 30px; padding: 0 15px;}
			.my_friends .list li{ position: relative; padding: 7px 15px;}
			.my_friends .list li::after{ position:absolute; content: ""; left: 60px; right: 0; bottom: 0; border-bottom: 1px #d4d4d4 solid; transform: scaleY(0.5);}
			.my_friends .list img{ width: 36px; height: 36px; border-radius: 7px; margin-right: 10px;}
			
			.sk-three-bounce {
			  margin: 0 auto;
			  width: 80px;
			  text-align: center; }
			  .sk-three-bounce .sk-child {
				width: 13.5px;
				height: 13.5px;
				background-color: #3262F1;
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
						animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
			  .sk-three-bounce .sk-bounce1 {
				-webkit-animation-delay: -0.32s;
						animation-delay: -0.32s; }
			  .sk-three-bounce .sk-bounce2 {
				-webkit-animation-delay: -0.16s;
						animation-delay: -0.16s; }

			@-webkit-keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); } }

			@keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); }
			}
			.display-none{ display:none !important; }
			.text-center { text-align: center !important; }
			.red-point{
			  position: relative;
			}

			.red-point::before{
			  content: " ";
			  border: 4px solid red;
			  border-radius:50%;
			  position: absolute;
			  z-index: 10;
			  right: 0%;
			  margin-right: 26px;
			  margin-top: 10.5px;
			}
		</style>
	</head>
	<body>
		<div class="my_friends">
			<ul class="top">
				<a href="javascript:;" id="btnaddfriend" tapmode="lipress" onclick="openNavWin('#ddd','addfriend_win','addfriend_frm.html','添加好友',false,false,true,[],{});">
					<div class="m_cell_hd"><img src="../../image/img_29.png" alt="" /></div>
					<div class="m_cell_hd m_cell_primary"><h4>添加好友</h4></div>
					<div class="m_cell_ft"><img src="../../image/img_13.png" alt="" /></div>
				</a>
				</ul>
				<b id="tongxunlu" class="display-none">通讯录</b>
				<ul class="list" id="friendslist">
				</ul>
				<script id="friendslist_template" type="text/template">
				{{ for (var i = 0, len = it.length; i < len; i++) { }}
					<li tapmode="lipress" tapmode data-mobile="{{=it[i].mobile}}" data-url="{{=it[i].avatar}}" onclick="chat(this);">
						<div class="m_cell_hd"><img data-url="{{=it[i].avatar}}" onload="fnLoadImage(this)" src="../../image/defaultimg.png" onerror="javascript:this.src='../../image/defaultimg.png';" /></div>
						<div class="m_cell_hd m_cell_primary"><h4>{{=it[i].realname}}</h4></div>
					</li>
				{{ } }}
				</script>
		</div>
		<!-- <div class="text-center display-none" style="padding: 50px 0 !important;" id="divnodata"> -->
			<!-- <div class="text-center"><img src="../../image/nodata.png" style="margin:0 auto;width:41px;height:auto;"></div> -->
			<!-- <p class="text-center" style="font-size:12px;color:#9f9f9f;margin-top:15px;">您还没有好友</p> -->
		<!-- </div> -->
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/app.js"></script>
	<script type="text/javascript" src="../../script/doT.js"></script>
	<script type="text/javascript">
		var page = 1;
		var rong;
		var myuid,myavatar,mylocalavatar;
		var params = {
			where: {
				status: 1,
			}
		};
		var UILoading;
		apiready = function() {
			api.parseTapmode();
			UILoading = api.require('UILoading');
			rong = api.require('rongCloud2');
			$api.css($api.dom('.my_friends'), 'display: none');
			
			showloading();
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret && ret.value)
				{
					var userinfo = JSON.parse(ret.value);
					myuid = userinfo.mobile;
					myavatar = userinfo.avatar;
					fnLoadMyImage(userinfo.avatar);
				}
			});
			getJsonFromAPI();
			var transformarr = [];
			for(var i=1; i<24; i++)
			{
				var index = i < 10 ? '0'+i : i;
				transformarr.push('widget://image/UIPullRefreshImg/pull_end_image_frame_'+index+'.png');
			}
			api.setCustomRefreshHeaderInfo({
				bgColor : '#F7F8FA',
				image : {
					pull : 'widget://image/UIPullRefreshImg/pull.png',
					transform : transformarr,
					load : transformarr
				}
			}, function(ret, err) {
				refreshPage();
				setTimeout(function() {
					api.refreshHeaderLoadDone();
				}, 3000)
			});
			api.addEventListener({
				name : 'refreshavatar'
			}, function(ret, err) {
				api.getPrefs({
					key: 'user_info'
				}, function(ret, err) {
					if (ret && ret.value)
					{
						var userinfo = JSON.parse(ret.value);
						myuid = userinfo.mobile;
						myavatar = userinfo.avatar;
						fnLoadMyImage(userinfo.avatar);					
					}
				});				
			});
			api.addEventListener({
				name:"refreshindex"
			},function(ret,err){
				refreshPage();
			});
			api.addEventListener({
				name:"refreshfriends"
			},function(ret,err){
				refreshPage();
			});
			api.addEventListener({
				name : 'reloadpage'
			}, function(ret, err) {
				refreshPage();				
			});
			api.addEventListener({
				name : 'changeredpoint'
			}, function(ret, err) {
				var msgjson = ret.value.msgjson;
				if(msgjson.friendnoreadmsg > 0)
				{
					$api.addCls($api.byId('btnaddfriend'),'red-point');
				}
				else
				{
					if($api.hasCls($api.byId('btnaddfriend'),'red-point')) {
						$api.removeCls($api.byId('btnaddfriend'),'red-point');
					}
				}
				
			});
		}
		function fnLoadMyImage(dataUrl) {
			if(dataUrl!=''){
				api.imageCache({
					url: dataUrl
				}, function(ret, err) {
				
					if(ret && ret.status == true){
						mylocalavatar = ret.url;
						
					}
				});
			}
		}
		function chat(obj) {
			var dfuid = $api.attr(obj,'data-mobile');
			var dfavatar = $api.attr(obj,'data-url');
			var dflocalavatar = $api.attr(obj.firstElementChild.firstElementChild,'src');
			var dfnickname = $api.text(obj.lastElementChild);
			var params = {
				dfuid : dfuid,
				dfnickname : dfnickname,
				dfavatar : dfavatar,
				dflocalavatar : dflocalavatar,
				mylocalavatar: mylocalavatar
			};
			opWin('chat_win','chat_win.html',true,params,false);
			//openNavWin('#ddd','chat_win','chat_frm.html',dfnickname,false,false,true,[],params);
		}
		function fnLoadImage(obj) {
			obj.onload = null;
			var dataUrl = $api.attr(obj, 'data-url');
			if(dataUrl!=''){
				api.imageCache({
					url: dataUrl
				}, function(ret, err) {
					if(ret && ret.status == true){
						obj.src = ret.url;
					}
				});
			}
		}
		
		function refreshPage() {
			page = 1;
			getJsonFromAPI();
		}
		function getJsonFromAPI() {
			//从接口获取查询数据
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/friends/'+page+'/'+ $api.jsonToStr(params),
						method: 'get',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						}
					}, function(ret, err) {
						api.refreshHeaderLoadDone();
						hideloading();
						$api.css($api.dom('.my_friends'), 'display: block');
						if (ret) {
							if(ret.count > 0)
							{
								$api.addCls($api.byId('btnaddfriend'),'red-point');
							}
							else
							{
								if($api.hasCls($api.byId('btnaddfriend'),'red-point')) {
									$api.removeCls($api.byId('btnaddfriend'),'red-point');
								}
							}
							if(ret.list.length > 0)
							{
								$api.removeCls($api.byId('tongxunlu'),'display-none');
								var isAppend = true;
								if(page==1)
								{
									isAppend = false;
								}
								page++;
								var friendslist = ret.list;
								UpdateList('friendslist','friendslist_template',friendslist,isAppend);
							}
							else
							{
								if(page==1)
								{
									UpdateList('friendslist','friendslist_template',ret.list,false);
									$api.addCls($api.byId('tongxunlu'),'display-none');
								}
							}
							api.execScript({
								name: 'root',
								frameName: 'home_frm',
								script: 'reloadUnreadCount();'
							});
						} else {
							if(err.statusCode==402)
							{
								Relogin();
							}
							else
							{
								console.log(JSON.stringify(err));
								toast('网络异常');
							}
						}
					});
				}
			});
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata,isAppend) {
			//console.log(JSON.stringify(jsondata));
			var act_content = $api.byId(domId);
			var tempFn = doT.template($api.byId(templateId).innerHTML);
			var resultText = tempFn(jsondata);
			//alert(isAppend);
			console.log(resultText);
			if(isAppend)
			{
				$api.append(act_content, resultText);
			}
			else
			{
				$api.html(act_content, resultText);
			}
			api.parseTapmode();
		}
	</script>
</html>